<template>
  <div class="workPlan">
    <div class="workPlan_top">
      <div class="title"> {{ time }}(日度)日计划完成情况组合图</div>
      <lineBarChart ref="workPlanChart" id="workPlanChart" width="100%" height="100%"></lineBarChart>
    </div>
    <div class="workPlan_bottom">
      <tableBox :data="tableData" :show-serial-number="false" @toDetailsList="toDetailsList">
      </tableBox>
    </div>
  </div>
</template>
<script>
import tableBox from "../components/tableBox.vue"
import lineBarChart from "../components/lineBarChart.vue"
import {
  getMonthWorkPlan,
  getMonthWorkPlanTable
} from "@/api/bi/HRAndContract";
export default {
  components: { tableBox, lineBarChart },
  data() {
    return {
      tableData: [],
      tableThead: [],
      time: null,
      load: null
    }
  },
  mounted() {
    this.load = this.$loading({
      lock: true,
      text: '加载中...',
      spinner: 'el-icon-loading',
      background: 'rgba(0, 0, 0, 0.7)'
    });
    this.getMonthWorkPlanChart()
    this.getTableData()
    let date = new Date()
    this.time = date.getFullYear() + '年' + (date.getMonth() + 1) + '月'
  },
  methods: {
    // 获取表格数据
    async getTableData() {
      const { data: res } = await getMonthWorkPlanTable();
      let style = "background: #EEEFF3;border-right:1px solid #fff"
      let tableThead = [
        [{ val: '业态', rowspan: 2, style }, { val: '项目区域', rowspan: 2, style }, { val: '项目名称', rowspan: 2, style }, { val: '日计划', colspan: 9, style }, { val: '专项计划', colspan: 6, style }],
        [{ val: '计划值' }, { val: '已完成' }, { val: '未提交' }, { val: '系统默认' }, { val: '客户确认' }, { val: '客户驳回' }, { val: '已整改' }, { val: '未整改' }, { val: '完成率' },
        { val: '已完成' }, { val: '系统默认' }, { val: '客户确认' }, { val: '客户驳回' }, { val: '已整改' }, { val: '未整改' }]
      ]
      let data = []
      res.forEach(item => {
        data.push([
          { val: item.projectBusiness },
          { val: item.projectRegion },
          { val: item.projectName, click: 'toDetailsList', key: item.projectId, style: "cursor: pointer;color:#409EFF" },
          { val: item.submitNumber },
          { val: item.successNumber },
          { val: item.unSuccessNumber },
          { val: item.defaultNumber },
          { val: item.confirmNumber },

          { val: item.rejectNumber },
          { val: item.rectifiedNumber },
          { val: item.unRectifiedNumber },
          { val: (item.successRate ? item.successRate.toFixed(2) : 0) + '%' },
          { val: item.zxSuccessNumber },
          { val: item.zxConfirmNumber },
          { val: item.zxDefaultNumber },
          { val: item.zxRejectNumber },
          { val: item.zxRectifiedNumber },
          { val: item.zxUnRectifiedNumber },
        ])
      })
      this.tableData = [...tableThead, ...data]
    },
    // 获取当月天数
    getDaysInMonth() {
      const today = new Date();
      const currentYear = today.getFullYear();
      const currentMonth = today.getMonth() + 1;
      const nextMonth = new Date();
      nextMonth.setFullYear(currentYear, currentMonth, 1);
      nextMonth.setDate(nextMonth.getDate() - 1);
      return nextMonth.getDate();
    },
    // 项目日计划完成曲线图
    async getMonthWorkPlanChart() {
      const { data: res } = await getMonthWorkPlan();
      let xAxisData = []
      let legendData = { show: true, data: ['计划值', '未完成', '已完成'] }
      let seriesData = []
      let dataNum = this.getDaysInMonth()
      for (let i = 1; i <= dataNum; i++) {
        xAxisData.push(i)
      }
      res.dataVal.forEach((item, index) => {

        let type = { type: 'line' }
        if (index > 0) {
          type = {
            type: 'bar',
            stack: 'Ad',
          }
        }

        let label = {}
        if (index !== 0) {
          label = {
            show: true,
            position: 'inside',
            formatter: '{c}'
          }
        }
        seriesData.push(
          {
            name: index == 0 ? '计划值' : index == 1 ? '已完成' : '未完成',
            ...type,
            data: item,
            label
          },
        )
      })
      this.$refs.workPlanChart.initChart(legendData, xAxisData, seriesData)
      this.load.close();
    },
    toDetailsList(key) {
      this.$router.push("/workPlan/workPlan/detailsList/" + key);
    }
  }

}
</script>
<style lang="scss" scoped>
.workPlan {
  width: 100%;
  height: 100%;
  background: #fff;
  padding: 20px;
  box-sizing: border-box;
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  .title {
    line-height: 39px;
    color: rgba(0, 0, 0, 1);
    font-size: 28px;
    text-align: center;
  }

  .workPlan_top {
    height: 35vh;
    display: flex;
    flex-direction: column;

  }

  .workPlan_bottom {
    height: 50vh;
    display: flex;
    flex-direction: column;

    >div:nth-child(2) {
      flex-grow: 1;
    }
  }
}
</style>